<template>
  <a-drawer :title="`货箱`" width="70%" :visible="visible"
            hide-cancel
            @cancel="visible = false"
            :footer="false"
            v-if="visible">
    <ma-crud ref="crudRef" :columns="columns" :options="options">
      <template #tableButtons>
        <a-button type="primary" status="danger" @click="deleteParcel">
          <icon-delete/>拆分回仓
        </a-button>
      </template>

      <template #number="{ record }">
        <p>{{record.shipment.shipment_no}}</p>
        <p>{{record.number}}</p>
      </template>

      <template #weight="{ record }">
        <p>{{record.actual_weight}}</p>
        <p>{{record.actual_length}}*{{record.actual_width}}*{{record.actual_height}}</p>
      </template>

    </ma-crud>
    <batchActionModal :crud-ref="crudRef" :selected="selected" ref="batchDeleteActionRef" />
  </a-drawer>
</template>
<script setup>

import {computed, inject, ref,reactive,watch} from "vue";
import parcel from "@/api/document/parcel";
import tray  from '@/api/warehouse/tray'
import BatchActionModal from "@cps/actions/batchActionModal.vue";
import dicthelper from "@/utils/dicthelp.js";
const crudRef = ref()
const currentRow = ref({ id: undefined ,number:undefined})
const ParentCrudRef = inject('crudRef')
const batchDeleteActionRef = ref()
const selected = computed(() => crudRef.value?.selecteds)
const visible = defineModel()

const open = (row) => {
  currentRow.value = row
  // crudRef.value.requestData()
  visible.value = true
}

const options = ref({
  // autoRequest: false,
  api: parcel.getList,
  showIndex: false,
  pageLayout: 'fixed',
  showTools: false,
  rowSelection: {showCheckedAll: true},
  beforeRequest: (params) => params.tray_id = currentRow.value?.id
})
const columns = reactive([
  {
    title: "主键",
    dataIndex: "id",
    formType: "input",
    hide: true,
  },
  {
      title: "用户",
      dataIndex: "shipment.user_id",
      formType: "select",
      dict:dicthelper.customer
  },
  {
      title: "单号",
      dataIndex: "number",
      formType: "input",
      search:true,
  },
  {
      title: "重量尺寸",
      dataIndex: "weight",
      formType: "input",
      search:true,
  },
  {
      title: "承运商",
      dataIndex: "outer_carrier_code",
      formType: "input",
      search:true,
  },
])


const deleteParcel = () => {
  batchDeleteActionRef.value.open(
      {
        title: '移除', api: tray.splitBack, form: {
          key: 'ids',
          options: {
            layout: 'vertical'
          },
          form: {
            tray_id: currentRow.value?.id,
          },
          columns: [],
          submited: async () => {
            crudRef.value.refresh()
            ParentCrudRef.value.refresh()
            return true;
          }
        }
      },
    )
}
defineExpose({ open })
</script>